﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/lipe.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="${ctx}/css/lipe.css"/>
<!--     <link rel="stylesheet" href="css/pageiter.css"/> -->
    <!--   <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/> -->
    <script type="text/javascript" src="${ctx}/resources/plugins/jquery-easyui-1.4.3/jquery.min.js"></script>
</head>
<style>
    /*body {*/
        /*padding-top: 50px*/
    /*}*/

    .bs-navbar {
        background-color: #3aa9ff;
        border-color: #63b8f9
    }

    .bs-navbar .navbar-brand {
        color: #fff
    }

    .bs-navbar .navbar-nav > li > a {
        color: #d4eafc
    }

    .bs-head {
        background-color: #3aa9ff;
        text-align: left;
        padding: 50px 0
    }

    .bs-head h1 {
        font-size: 60px;
        color: #fff
    }

    .bs-head .lead {
        font-size: 30px;
        color: #e8eeff
    }

    .bs-footer {
        padding-top: 40px;
        padding-bottom: 30px;
        margin-top: 100px;
        color: #777;
        text-align: left;
        border-top: 1px solid #e5e5e5
    }

    .bs-footer p {
        margin-bottom: 0
    }

    .bs-sidebar {
        width: 180px;
        background-color: #f7f7f7;
        margin-top: 30px
    }

    .bs-sidebar.affix {
        position: fixed;
        top: 90px
    }

    .bs-sidebar .nav > .active > a {
        font-weight: bold;
        background-color: transparent;
        border-left: 1px solid #428bca
    }

    .page-header {
        margin: 40px 0 20px
    }

    .page-header h2 {
        padding-top: 80px;
        margin-top: -45px
    }

    .demo {
        padding: 20px;
        margin: 20px 0;
        background-color: #f7f7f7
    }

    .demo p {
        font-size: 15px
    }

    .arrow {
        display: inline-block;
        overflow: hidden;
        border-left: 5px dashed transparent;
        border-bottom: 5px dashed transparent;
        border-right: 5px dashed transparent;
        border-top: 5px solid #fff;
        vertical-align: middle
    }

    .arrow2 {
        border-left: 5px dashed transparent;
        border-bottom: 5px dashed transparent;
        border-top: 5px dashed transparent;
        border-right: 5px solid #ccc
    }

    .arrow3 {
        border-top: 5px dashed transparent;
        border-bottom: 5px dashed transparent;
        border-right: 5px dashed transparent;
        border-left: 5px solid #ccc
    }

    .customBootstrap .pagination > li > a {
        margin-right: 5px;
        border-radius: 2px;
        background: #fff;
        color: #333;
        border-color: #ccc;
        padding: 6px 15px
    }

    .customBootstrap .pagination > li > a:hover, .customBootstrap .pagination > li > a:focus {
        color: #fff;
        background: #fb9400;
        border-color: #fb9400
    }

    .customBootstrap .pagination > .active > a, .customBootstrap .pagination > .active > a:hover, .customBootstrap .pagination > .active > a:focus {
        color: #fff;
        background: #fb9400;
        border-color: #fb9400
    }

    .customBootstrap .pagination .arrow2 {
        margin: 3px 8px 5px 0
    }

    .customBootstrap .pagination a:hover .arrow2 {
        border-right-color: #fff
    }

    .customBootstrap .pagination .arrow3 {
        margin: 3px 0 5px 8px
    }

    .customBootstrap .pagination a:hover .arrow3 {
        border-left-color: #fff
    }

    .pagination2 {
        height: 30px;
        margin: 10px 0
    }

    .pagination2 a {
        text-decoration: none;
        border: solid 1px #c0d3e6;
        color: #333;
        border-left-width: 0;
        height: 24px !important
    }

    .pagination2 a {
        height: 24px !important;
        display: block;
        float: left;
        padding: 0 10px;
        text-align: center;
        line-height: 24px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
    }

    .pagination2 .active {
        background-color: #6babdd;
        color: #fff;
        padding: 0 10px;
        border: solid 1px #5c95c1
    }

    .pagination2 .prev {
        border: solid 1px #c0d3e6
    }

    .pagination2 .next {
        border-left-width: 0;
        border-right-width: 1px
    }

    .pagination2 .active.prev, .pagination2 .active.next {
        color: #dcdcdc;
        border-color: #efefef;
        background: #fff
    }

    .pagination2 a:hover {
        background-color: #cde4f8
    }

    .pagination2 .active:hover {
        background-color: #6babdd
    }

    .pagination2 a.disabled {
        display: none
    }

    .pagination4 .page a, .pagination4 .page a:hover {
        width: 100px;
        text-align: center;
        border: 1px solid #ddd;
        color: #999;
        background-color: #fff !important
    }

    pre code {
        background-color: transparent
    }
</style>

<body>
<%@ include file="/header.jsp" %>
<div id="content">
    <section class="container img-list-box">
        <div id="style_menu" class="child-menu">
            <ul class="sub-nav-list">
                <li><a href="javascript:void(0)">中式</a></li>
                <li><a href="javascript:void(0)">日式</a></li>
                <li><a href="javascript:void(0)">东南亚</a></li>
                <li><a href="javascript:void(0)">欧式</a></li>
                <li><a href="javascript:void(0)">美式</a></li>
                <li><a href="javascript:void(0)">法式</a></li>
                <li><a href="javascript:void(0)">地中海</a></li>
                <li><a href="javascript:void(0)">新古典</a></li>
                <li><a href="javascript:void(0)">现代简约</a></li>
                <li><a href="javascript:void(0)">乡村田园</a></li>
                <li><a href="javascript:void(0)">其它</a></li>
            </ul>
            <div class="title-label" id="switchBtn">
                <span id="s1" class="at-white" onclick="setURL(1)">设计师</span>
                <span id="s2" class="at-bg" onclick="setURL(2)">案例</span>
            </div>
        </div>
        <ul id="designerContent" class="img-list-small" style="min-height: 300px;">
            <li id="desTemp" class="hide">
                <a href="javasrcipt:void(0)">
                    <img name="logo" src="images/temp/ple1.png" alt="" style="height: 100%;width:100%;"/>
                    <div class="img-info">
                        <span name="designer" class="k-label">姓名</span>
                        <span name="org" class="k-label-lg">设计公司名称</span>
                    </div>
                    <div class="img-mark"></div>
                </a>
            </li>
        </ul>
        <ul id="caseContent" class="img-list-base hide" style="min-height: 300px;">
            <li id="caseTemp" class="hide">
                <img name="pics" src="images/temp/temp1.png" alt=""/>
                <div class="p-c-info">
                    <div class="p-info"></div>
                    <div class="p-txt-info">
                        <div class="p-head-box"><img name="logo" src="images/temp/temp1.png" alt="" class="p-head"/>
                        </div>
                        <p name="designer">李静</p>
                        <p name="org">木森设计公司</p>
                        <p><a href="">查看主页</a></p>
                    </div>
                </div>
                <div class="img-info">
                    <!--                     <span class="k-label"> -->
                    <!--                         <i class="icon-p icon-size-white"></i> 200m<sup>2</sup> -->
                    <!--                     </span> -->
                    <span>
                        <i class="icon-p ico-location-white"></i><span name="address">成都市高新区天府二街世纪城1期 </span>
                    </span>
                </div>
            </li>
        </ul>
        <!-- pages-->
        <div id="demo4" style="margin-top:20px;"></div>
        <!--         <div id="pageit" class="pages"> -->
        <!--             <ul class="page-list"> -->
        <!--                 <li class="pre"><a id="perpage" href=""><i class="icon-p icon-back"></i></a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)" class="active">1</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">2</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">3</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">4</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">5</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">6</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">7</a></li> -->
        <!--                 <li class="page-num"><a href="javascript:void(0)">8</a></li> -->
        <!--                 <li>.....</li> -->
        <!--                 <li class="page-num"><a href="">50</a></li> -->
        <!--                 <li class="next"><a id="nextpage" href=""><i class="icon-p icon-next"></i></a></li> -->
        <!--                 <li class="last"><a href=""><i class="icon-p icoc-lastpage"></i></a></li> -->
        <!--             </ul> -->
        <!--             <div class="page-other-info" id="totalpage"> -->
        <!--                		 共50页 <span class="p-mar">跳到</span> <input type="text" class="num" id="pageNumber"/> 页 <button class="btn-p" id="trunpage">确定</button> -->
        <!--             </div> -->
        <!--         </div> -->

        <!--// pages-->
        <%--<div class="demo">--%>
            <%--<p id="demo3-text"></p>--%>
            <%--<div id="demo3" class="pagination2"></div>--%>
        <%--</div>--%>
        <div class="demo customBootstrap">
            <ul id="pageiter" class="pagination"></ul>
        </div>


    </section>
</div>
<%@ include file="/footer.jsp" %>
 
<script>
    $(document).ready(function () {
        $("#headmenu li a").removeClass("active");
        var $this = $("#headmenu li a[id='page2']")
        $this.addClass("active");

        $("#pageiter").jqPaginator({
            totalPages: 100,
            visiblePages: 10,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (page) {
            	$("#style_menu").data("page", page);
            	queryWithOutPage();
            }
        });

        queryDesigner();

    });
    var queryurl1 = '${ctx}/customer/queryForPage.do';
    var queryurl2 = '${ctx}/customer/queryCasePage.do';
    var defaultURL = queryurl1;

    function setURL(obj) {
        if (obj == 1) {
            $("#caseContent").addClass("hide");
            $("#designerContent").removeClass("hide");
            defaultURL = queryurl1;
            $("#switchBtn #s1").attr("class", "at-white");
            $("#switchBtn #s2").attr("class", "at-bg");
        }
        if (obj == 2) {
            $("#caseContent").removeClass("hide");
            $("#designerContent").addClass("hide");
            defaultURL = queryurl2;
            $("#switchBtn #s2").attr("class", "at-white");
            $("#switchBtn #s1").attr("class", "at-bg");
        }
        queryDesigner();
    }

   
    $("#style_menu ul li a").bind("click", function (e) {
        $("#style_menu a").removeClass("active");
        var $this = $(this);
        $this.addClass("active");
        $("#style_menu").data("style", $this.text());
        $("#style_menu").data("page", 1);
        queryDesigner();
    });

    function queryDesigner(style) {
        var style = $("#style_menu").data("style");
        var page = $("#style_menu").data("page");

        var data = {goodat_style: style, page: page, rows: 20, usertype: 2, status: 3}
        $.ajax({
            data: data,
            url: defaultURL,
            success: function (res) {
                if (res.rows) {
                    $("#designerContent").children().not("#desTemp").remove();
                    $("#caseContent").children().not("#caseTemp").remove();
                    var totalpage = 0;
                    if (res.totalpage) {
//                         $("#demo4").paginate({
//                             count: 99,
//                             start: 1,
//                             display: 10,
//                             border: true,
//                             border_color: '#fff',
//                             text_color: 'black',
//                             background_color: '#fff',
//                             border_hover_color: '#ccc',
//                             text_hover_color: '#fff',
//                             background_hover_color: 'black',
//                             images: false,
//                             mouse: 'press',
//                             rotate: true,
//                             onChange: function (page) {
//                                 // console.log(page);
//                                 $("#style_menu").data("page", page);
//                                 queryWithOutPage();
//                             }
//                         });
//                         $("#totalpage").text("共" + res.totalpage + "页");

						$("#pageiter").jqPaginator('option', {
		  		            totalPages:  res.totalpage,
		  		            visiblePages: 10,
		  		            currentPage: 1
		  		        });
  		         
                        $.each(res.rows, function (index, element) {
                            if (defaultURL == queryurl1) {
                                var temp = $("#desTemp").clone();
                                temp.find("img[name='logo']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.logo + '?imageView2/1/w/188/h/284');
                                temp.find("span[name='designer'] ").text(element.realname);
                                temp.find("span[name='org'] ").text(element.orgname);
                                temp.find("a").attr("href", '${ctx}/customer/goDesigner.do?id=' + element.customerid);
                                temp.removeClass("hide");
                                temp.removeAttr("id");
                                $("#designerContent").append(temp);
                            }
                            if (defaultURL == queryurl2) {
                                var temp = $("#caseTemp").clone();
                                temp.find("img[name='pics']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.pics + '?imageView2/1/w/485/h/304');
                                temp.find("img[name='logo']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.logo + '?imageView2/1/w/100/h/100');
                                temp.find("p[name='designer'] ").text(element.realname);
                                temp.find("p[name='org'] ").text(element.orgname);
                                temp.find("span[name='address'] ").text(element.address);
                                temp.removeClass("hide");
                                temp.removeAttr("id");
                                temp.find("a").attr("href", '${ctx}/customer/goDesigner.do?id=' + element.userid);
                                $("#caseContent").append(temp);
                            }

                        });
                    }

                }
            }, error: function (res) {
               // alert(res);
            }
        });
    }
    function queryWithOutPage() {
        var style = $("#style_menu").data("style");
        var page = $("#style_menu").data("page");
        var data = {goodat_style: style, page: page, rows: 20, usertype: 2, status: 3}
        $.ajax({
            data: data,
            url: defaultURL,
            success: function (res) {
                if (res.rows) {
                    $("#designerContent").children().not("#desTemp").remove();
                    $("#caseContent").children().not("#caseTemp").remove();
                    $.each(res.rows, function (index, element) {
                        if (defaultURL == queryurl1) {
                            var temp = $("#desTemp").clone();
                            temp.find("img[name='logo']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.logo + "?imageView2/1/w/188/h/284");
                            temp.find("span[name='designer'] ").text(element.realname);
                            temp.find("span[name='org'] ").text(element.orgname);
                            temp.find("a").attr("href", '${ctx}/customer/goDesigner.do?id=' + element.customerid);
                            temp.removeClass("hide");
                            temp.removeAttr("id");
                            $("#designerContent").append(temp);
                        }
                        if (defaultURL == queryurl2) {
                            var temp = $("#caseTemp").clone();
                            temp.find("img[name='pics']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.pics + '?imageView2/1/w/485/h/304');
                            temp.find("img[name='logo']").attr('src', '${sysparam.IMAGE_PREFIX_URL}' + element.logo + '?imageView2/1/w/100/h/100');
                            temp.find("p[name='designer'] ").text(element.realname);
                            temp.find("p[name='org'] ").text(element.orgname);
                            temp.find("span[name='address'] ").text(element.address);
                            temp.removeClass("hide");
                            temp.removeAttr("id");
                            temp.find("a").attr("href", '${ctx}/customer/goDesigner.do?id=' + element.userid);
                            $("#caseContent").append(temp);
                        }

                    });
                }
            }, error: function (res) {

            }
        });
    }
    
    
</script>
</body>
</html>